<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="topUp-page w100">
		<view class="user-box w100 flex-row-center">
			<image :src="userInfo.avatar" class="ava" mode="aspectFill"></image>
			<view class="user-info flex">
				<text class="name">{{userInfo.nickname}}</text>
				<text class="price">余额：￥{{accountInfo.available_balance}}</text>
			</view>
		</view>
		<view class="topUp-box w100">
			<text class="title">请选择充值类型</text>
			<view class="topUp-content">
				<view :class="[topUpInfo.id===item.id?'topUp-item-active':'topUp-item','flex-center']"
					@click="changeItem(item)" v-for="(item,index) in topUpList" :key="index">
					<view class="price-box" v-if="item.price">
						<text class="unit">￥</text>
						<text class="price">{{item.price}}</text>
					</view>
					<text class="text" v-else>{{item.name}}</text>
				</view>
			</view>
			<view class="topup-int flex-row-center" @click="changeItem({price:topUpInfo.price,id:5})">
				<text class="title">充值金额：</text>
				<up-input border="none" type='number' disabled
					:customStyle="{height:'100%',margin:'0 24rpx',backgroundColor:'transparent'}"
					placeholderClass="placeholderClass" fontSize="36rpx" color="#8BFFF3" placeholder="请输入充值金额"
					v-model="topUpInfo.price">
					<template #suffix>
						<text class="price-icon">元</text>
					</template></up-input>
			</view>
			<!-- 优惠券 -->
			<view class="w100">
				<chooseCoupon :detail="3" @changeCouponItem="changeCoupon"></chooseCoupon>
			</view>
			<!-- 充值说明 -->
			<view class="topup-tips flex" v-if="topUpTipsList.list.length>0">
				<text class="title">充值说明：</text>
				<view class="tips-box flex" v-for="(item,index) in topUpTipsList.list" :key="item.id">
					<text class="icon"></text>
					<text class="text" v-if="item.end&&item.end>0">充值金额在{{item.begin}} ~
						{{item.end}}之间，将返利充值金额的{{item.rate}}%；</text>
					<text class="text" v-else>充值金额在 {{item.begin}} 元以上，将返利充值金额的{{item.rate}}%；</text>
				</view>
			</view>
			<view class="footer-box w100">
				<view class="topUp-btn w100">
					<!-- 协议 -->
					<view class="agreement-box flex-center">
						<up-checkbox labelColor="#999999" shape="circle" size="30rpx" labelSize="24rpx" label="已阅读并同意"
							activeColor="#8BDEB7" @change="changeChecked" name="agree" :checked="checked">
						</up-checkbox>
						<view class="content flex-row-center">
							<text class="agreement-name" @click="toProtocol(3)">《支付协议》</text>
						</view>
					</view>
					<up-button :disabled="isMoney" :customStyle="{'color':'#186059','height':'84rpx',}"
						@click="submitTopup" text="立即充值" loadingText="提交中" :loading="topUpInfo.loadingState"
						shape="circle"
						color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
				</view>
			</view>
		</view>

	</view>
	<up-keyboard ref="uKeyboard" mode="number" tips="输入充值金额" @confirm="()=>keyboardShow=false" :showCancel='false'
		@change="valChange" @backspace="backspace" :overlay="false" :show="keyboardShow"></up-keyboard>
</template>

<script setup>
	import {
		userInfoStore
	} from '@/stores/user';
	import {
		countDecimalPlaces
	} from '@/utils/utools';
	import {
		test
	} from '@/uni_modules/uview-plus';
	import {
		usePay
	} from '@/hooks/usePay.js';
	const {
		appPay
	} = usePay();
	const userStore = userInfoStore();
	const userInfo = ref(computed(() => userStore.userInfo));
	const topUpInfo = ref({
		id: 1,
		price: '50',
		loadingState: false,
		couponId: 0
	});
	const checked = ref(false);
	const topUptext = ref('立即充值￥10.0')
	const keyboardShow = ref(false);
	const isMoney = ref(false);
	const accountInfo = ref(computed(() => userStore.accountInfo));
	const topUpTipsList = reactive({
		list: []
	})
	const topUpList = [{
			name: '金额一',
			price: '50',
			id: 1
		}, {
			name: '金额二',
			price: '100',
			id: 2
		}, {
			name: '金额三',
			price: '150',
			id: 3
		}, {
			name: '金额三',
			price: '200',
			id: 4
		},
		{
			name: '自定义',
			price: '',
			id: 5
		},
	];
	onLoad(() => {
		getMoneyList();
	})
	const getMoneyList = async () => {
		const res = await $Api.user.getMoneyList();
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				topUpTipsList.list = res.data.list;
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const valChange = (val) => {
		// 将每次按键的值拼接到value变量中，注意+=写法
		if (countDecimalPlaces(topUpInfo.value.price) >= 2) return
		topUpInfo.value.price += val;
		isMoney.value = !test.amount(topUpInfo.value.price);
	};
	const backspace = () => {
		// 删除value的最后一个字符
		if (topUpInfo.value.price.length) {
			topUpInfo.value.price = topUpInfo.value.price.substr(0, topUpInfo.value.price.length - 1);
		}
		isMoney.value = !test.amount(topUpInfo.value.price);
	};
	const changeItem = (item) => { //切换类型
		topUpInfo.value.id = item.id;
		topUpInfo.value.price = item.price;
		if (item.id == 5) { //自定义充值
			keyboardShow.value = true;
		} else {
			keyboardShow.value = false;
		}
		isMoney.value = !test.amount(topUpInfo.value.price);
	}
	const changeChecked = (e) => {
		checked.value = e
	}
	const submitTopup = async () => {
		if (topUpInfo.value.loadingState) return;
		if (!checked.value) {
			uni.$u.toast('请先阅读并勾选协议');
			return
		}
		if (topUpInfo.value.price <= 0) {
			uni.$u.toast('请输入提现金额');
			return
		}
		if (!test.amount(topUpInfo.value.price)) {
			uni.$u.toast('请输入正确的金额');
			return
		}
		topUpInfo.value.loadingState = true;
		const res = await $Api.order.submitOrder({
			type: 'wechat',
			method: 'miniapp',
			amount: topUpInfo.value.price,
			relationId: 1,
			relationType: 'Recharge',
			userCouponId: topUpInfo.value.couponId || 0
		})
		if (res.code == 1) {
			const {
				data
			} = res
			appPay({
				provider: 'wxpay',
				timeStamp: data.pre_payment.timeStamp,
				nonceStr: data.pre_payment.nonceStr,
				package: data.pre_payment.package,
				signType: data.pre_payment.signType,
				paySign: data.pre_payment.paySign,
			}).then((res) => {
				if (res.code === 200) {
					uni.showToast({
						title: '充值成功'
					})
					userStore.getAccount();
					setTimeout(() => {
						topUpInfo.value.loadingState = false;
						uni.navigateBack();
					}, 600)
				} else {
					uni.$u.toast('取消支付');
					topUpInfo.value.loadingState = false;
				}
			}).catch((err) => {
				// console.log(err);
				uni.$u.toast(err);
				topUpInfo.value.loadingState = false;
			})
		} else {
			topUpInfo.value.loadingState = false;
			uni.$u.toast(res.msg);
		}

	}
	const changeCoupon = (id) => { //切换优惠券
		if (!id) return
		topUpInfo.value.couponId = id;
	}
	const toProtocol = (type) => { //阅读协议
		uni.navigateTo({
			url: '/pages/protocol/protocol?type=' + type
		})
	}
</script>
<style>
	/deep/ .u-input {
		background-color: transparent !important;
	}

	/deep/ .placeholderClass {
		font-size: 32rpx !important;
	}
</style>
<style lang="scss" scoped>
	.topUp-page {
		padding-bottom: calc(164rpx + env(safe-area-inset-bottom));
	}

	.user-box {
		padding: 24rpx;

		.ava {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 18rpx;
		}

		.user-info {
			flex-direction: column;

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: $name-color;
				margin-bottom: 18rpx;
			}

			.price {
				font-size: 28rpx;
				color: $description-color;
			}
		}
	}

	.topUp-box {
		padding: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: $name-color;
		}

		.topUp-content {
			margin-top: 24rpx;
			display: grid;
			grid-template-columns: auto auto auto;
			grid-template-rows: auto auto auto;
			gap: 20rpx;

			.topUp-item {
				width: 224rpx;
				height: 180rpx;
				border-radius: 12rpx;
				box-sizing: border-box;
				border: 4rpx solid $cancel-btn-color;
			}

			.topUp-item-active {
				width: 224rpx;
				height: 180rpx;
				border-radius: 12rpx;
				box-sizing: border-box;
				border: 8rpx solid $attention-color;
			}

			.text {
				color: $price-color;
				font-size: 32rpx;
			}

			.price-box {
				color: $price-color;

				.unit {
					font-size: 32rpx;
				}

				.price {
					font-size: 42rpx;
					font-weight: 700;
				}
			}
		}

		.topup-int {
			margin: 48rpx 0;
			margin-bottom: 24rpx;

			.price-icon {
				font-weight: 500;
				font-size: 28rpx;
				color: #C2C3C4;
			}
		}
	}

	.topup-tips {
		flex-direction: column;
		margin-top: 24rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: $name-color;
			margin-bottom: 18rpx;
		}

		.tips-box {
			margin-bottom: 12rpx;

			.icon {
				border-radius: 50%;
				width: 12rpx;
				height: 12rpx;
				display: block;
				margin-right: 14rpx;
				background-color: #7EDE9E;
				margin-top: 15rpx;
				flex-shrink: 0;
			}

			.text {
				font-size: 28rpx;
				color: $description-color;
			}
		}
	}

	.footer-box {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #191C1F;
		border-top: 2rpx solid #303335;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.topUp-btn {
		padding: 18rpx 24rpx;
		width: 750rpx;
		height: 164rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.agreement-box {
		width: 100%;
		justify-content: center;
		margin-bottom: 12rpx;

		.content {
			font-weight: 500;
			font-size: 24rpx;
			margin-left: 8rpx;

			.text {
				color: #999999;
			}

			.agreement-name {
				color: #559992;
			}
		}
	}
</style>